<template>
  <div v-loading="loading" class="scroll-main">
    <div style="display: flex; justify-content: space-between; padding: 20px;">
      <div style="color: red">当前订单状态： <span>{{ detailInfo.status }}</span></div>
      <el-button type="primary" @click="showRemarkOrder">备注订单</el-button>
    </div>
    <el-card>
      <CommonList :list-config="baseListConfig" :list="detailInfo.baseList" />
      <CommonList :list-config="prodListConfig" :list="detailInfo.proList" />
      <div class="prod-sum-wrap">
        <div>总成本价：<span class="amount-color">{{ `¥${detailInfo.costTotalPrice}` }}</span></div>
        <div style="margin-left: 30px">总结算价： <span class="amount-color">{{ `¥${detailInfo.settlementTotalPrice}` }}</span></div>
      </div>
      <CommonList :list-config="optListConfig" :list="detailInfo.optList" />
    </el-card>
    <!--<CommonDialog
      :visible.sync="remarkDialogVisible"
      :dialog-config="dialogConfig"
      :value="ruleForm"
    />-->
  </div>
</template>

<script>
import CommonList from '@/components/Custom/CommonList'
import getBaseListParams from './getBaseListParams'
import getProListParams from './getProListParams'
import getOptListParams from './getOptListParams'

import { channelDetail } from '@/api/orders/channelList'
export default {
  name: 'ChannelDetail',
  components: {
    CommonList
  },
  mixins: [
    getBaseListParams,
    getProListParams,
    getOptListParams
  ],
  data() {
    return {
      id: '',
      pageOrigin: '',
      detailInfo: {
        baseList: [],
        optList: [],
        proList: [],
        status: 0,
        costTotalPrice: 0,
        settlementTotalPrice: 0
      },
      loading: false,
      orderAuditDialogVisible: false
    }
  },
  methods: {
    query() {
      this.loading = true
      channelDetail({ goodsOptCode: this.id }).then(res => {
        const resultData = res.data
        const { code, data } = resultData
        if (code === 0) {
          const { goodsOptDetails = [], reviews = [], goodsOptHead = {}} = data
          const status = Number(goodsOptHead.status)
          const baseList = [goodsOptHead]

          let costTotalPrice = 0
          let settlementTotalPrice = 0

          goodsOptDetails.forEach(item => {
            costTotalPrice += Number(item.totalCostPrice)
            settlementTotalPrice += Number(item.totalUnitPrice)
          })

          costTotalPrice = Number(costTotalPrice.toFixed(2))
          settlementTotalPrice = Number(settlementTotalPrice.toFixed(2))

          console.log('costTotalPrice====', costTotalPrice)
          const detailInfo = {
            status,
            baseList,
            optList: reviews,
            proList: goodsOptDetails,
            costTotalPrice,
            settlementTotalPrice
          }
          this.detailInfo = detailInfo
        }
        this.loading = false
      })
    },
    showRemarkOrder() {
      // todo
    }
  }
}
</script>

<style scoped>
    .scroll-main {
        height: calc(100vh - 113px);
        overflow: auto;
    }
    .prod-sum-wrap {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
        background: rgba(249, 250, 252, 1);
        margin-top: 14px;
        border-color: rgba(228, 228, 228, 1);
        font-size: 16px;
    }
    .amount-color{
        color: red
    }
</style>
